import React, { useState } from 'react';
import { Card, Table, Button, Space, Input, Checkbox, message, Row, Col } from 'antd';
import { PlusOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import './index.less';

interface DictionaryItem {
  key: string;
  code: string;
  name: string;
  sortNo: string;
  selected?: boolean;
}

const Dictionary: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState<DictionaryItem[]>([
    {
      key: '1',
      code: 'hxk-3',
      name: '呼吸内科专业',
      sortNo: '1001',
      selected: true
    },
    {
      key: '2',
      code: 'xhk-1',
      name: '消化内科专业',
      sortNo: '1002',
      selected: true
    },
    {
      key: '3',
      code: 'sjk-1',
      name: '神经内科专业',
      sortNo: '1003',
      selected: true
    },
    {
      key: '4',
      code: 'gdk-1',
      name: '肝胆外科项目',
      sortNo: '1004',
      selected: true
    }
  ]);

  const handleSelectAll = (e: any) => {
    const newSelectedRowKeys = e.target.checked ? data.map(item => item.key) : [];
    setSelectedRowKeys(newSelectedRowKeys);
    
    // 更新数据项的选中状态
    const newData = data.map(item => ({
      ...item,
      selected: e.target.checked
    }));
    setData(newData);
  };

  const handleSelect = (checked: boolean, record: DictionaryItem) => {
    const newSelectedRowKeys = checked 
      ? [...selectedRowKeys, record.key]
      : selectedRowKeys.filter(key => key !== record.key);
    
    setSelectedRowKeys(newSelectedRowKeys);
    
    // 更新单个数据项的选中状态
    const newData = data.map(item => {
      if (item.key === record.key) {
        return { ...item, selected: checked };
      }
      return item;
    });
    setData(newData);
  };

  const handleDelete = (record: DictionaryItem) => {
    message.success(`删除成功: ${record.name}`);
  };

  const handleEdit = (record: DictionaryItem) => {
    message.success(`编辑: ${record.name}`);
  };

  const handleBatchDelete = () => {
    message.success(`批量删除成功: ${selectedRowKeys.length}项`);
  };

  const filteredData = data.filter(item => 
    !searchValue || 
    item.code.toLowerCase().includes(searchValue.toLowerCase()) || 
    item.name.toLowerCase().includes(searchValue.toLowerCase())
  );

  const columns = [
    {
      title: <Checkbox 
              indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < data.length}
              checked={selectedRowKeys.length === data.length}
              onChange={handleSelectAll}
            />,
      dataIndex: 'selected',
      key: 'selected',
      width: 50,
      render: (_: any, record: DictionaryItem) => (
        <Checkbox
          checked={record.selected}
          onChange={(e) => handleSelect(e.target.checked, record)}
        />
      ),
    },
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      width: 150,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '排序号',
      dataIndex: 'sortNo',
      key: 'sortNo',
      width: 150,
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_: any, record: DictionaryItem) => (
        record.code === '04.01.01' ? (
          <Space className="action-icons">
            <CheckCircleOutlined className="check-icon" />
            <CloseCircleOutlined className="close-icon" />
          </Space>
        ) : (
          <Space className="action-links">
            <a onClick={() => handleEdit(record)} className="edit-link">编辑</a> | 
            <a onClick={() => handleDelete(record)} className="delete-link">删除</a>
          </Space>
        )
      ),
    },
  ];

  return (
    <div className="dictionary-container">
      <div className="page-header">
        <div className="header-title">
          <span className="icon"></span>
          <h3>应用类型</h3>
        </div>
        <div className="header-actions">
          <Button type="primary" danger onClick={handleBatchDelete}>
            (3/22)删除
          </Button>
        </div>
      </div>

      <Card bordered={false}>
        <Row justify="end" style={{ marginBottom: 16 }}>
          <Col>
            <Input.Search
              placeholder="编码/名称"
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
              onSearch={value => setSearchValue(value)}
              style={{ width: 300 }}
            />
          </Col>
        </Row>

        <Table 
          columns={columns} 
          dataSource={filteredData}
          pagination={false}
          rowClassName={(record) => {
            if (record.code === '04.01.01') return 'highlighted-row';
            return '';
          }}
          footer={() => (
            <div className="add-row">
              <a>+新增</a>
            </div>
          )}
        />
      </Card>
      
      <div className="pagination-container">
        <div className="pagination-info">
          每页 <Input className="page-size-input" defaultValue="15" /> 条 (共193条)
        </div>
        <div className="pagination-buttons">
          <Button>首页</Button>
          <Button>«</Button>
          <Button type="primary">1</Button>
          <Button>2</Button>
          <Button>...</Button>
          <Button>8</Button>
          <Button>9</Button>
          <Button >12</Button>
          <Button>»</Button>
          <Button>尾页</Button>
        </div>
      </div>
    </div>
  );
};

export default Dictionary; 
